<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>后台管理的会员列表</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/vue.min.js"></script>

    <script type="text/javascript">

        //连接servlet 获取 数据

        //显示用户信息

        //删除用户

        //条件查询

    </script>
</head>
<body>

<div class="row" style="width: 100%;">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">会员列表</div>
            <div class="panel-body">
                条件查询
                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <div class="form-group form-inline">
                            <span>用户姓名</span>
                            <input type="text" name="username" class="form-control">
                        </div>
                    </div>
                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                        <div class="form-group form-inline">
                            <span>性别</span>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="男"> 男&nbsp;&nbsp;&nbsp;&nbsp;
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="女"> 女
                            </label>
                        </div>
                    </div>
                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                        <button type="button" class="btn btn-primary" id="search"><span
                                class="glyphicon glyphicon-search"></span></button>
                    </div>
                </div>
                <!-- 列表显示 -->
                <table id="tb_list" class="table table-striped table-hover table-bordered">
                    <tr>
                        <td>序号</td>
                        <td>电话</td>
                        <td>Email</td>
                        <td>操作</td>
                    </tr>
                    <tr v-for="user in users">
                        <td>{{user.id}}</td>
                        <td>{{user.tel}}</td>
                        <td>{{user.email}}</td>
                        <td>
                            <button @click="edit(user.id)">修改</button>
                            <button @click="del(user.id)">删除</button>
                        </td>
                    </tr>

                </table>


            </div>
        </div>
    </div>
</div>
<script>
    var info = new Vue({
        el: '#tb_list',
        data: {
            users: [{id: '3', tel: '15312345678', email: '111111@163.com'},
                {id: '4', tel: '15312345678', email: '111111@163.com'},
                {id: '5', tel: '15312345678', email: '111111@163.com'}]

        },
        methods: {
            edit: function (id) {
                alert("修改..." + id);
                $.ajax({
                	url:'getUserById/'+id,
                	type:'get',
                	dataType:'json',
                    success:function (res) {
                	    if (res.code==200){
                            console.log(res.data);
                        }

                    }

                });
            },
            del: function (id) {
                alert("del:" + id);
                $.ajax({
                    url:'/delUser?id='+id,
					type:'delete',
                    dataType:'json',
                    success:function (res) {
                        if (res.code == 200) {
                            alert(res.msg);
                            loadUsers();//重新加载数据
                        }
                    },
                    error: function() {
                        /*elert("ajax错误");*/
                        alert("错误")
                    }

                });

            }
        }
    });


    $(function () {
        // alert("a");
        //在页面加载完成是,向后端发送ajax请求
        loadUsers();
    });

    function loadUsers() {
        $.ajax({
            url: '/getSysUser',//请求路径
            type: 'get',//请求方式
            dataType: 'json',	//响应的数据类型
            // data:{//请求的数据
            //
            // },
            success: function (res) {

                console.log(res);
                info.users = res;
            }
        });

    }

</script>

</body>
</html>